<template>
  <div class="item">
     <img class="item-icon" :src="datas.thumb" alt="">
     <div class="item-title-state">
      <span class="item-title">{{datas.name}}</span>
      <div class="item-value-nums">
        <span class="values">￥ {{datas.price}}</span>
        <div>
          <button :disabled="datas.count==1" @click="handleClick(datas.id,-1)">- </button>
            {{ datas.count }}
          <button @click="handleClick(datas.id,1)"> +</button>
        </div>
      </div>
     </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'ShoppingItem',
  props: {
    datas: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick (id, value) {
      this.updateCount({
        id: id,
        value: this.datas.count + value
      })
    },
    ...mapActions('itemInfo', ['updateCount'])
  }
}
</script>

<style scoped>
.item{
  margin: 5px 0;
  background-color: white;
  border-radius: 5px;
  display: flex;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bolder;
}
.item-icon{
  width: 5em;
  height: 5em;
  border-radius: 5px;
}
.item-title-state{
  margin-left: 5px;
  width: 100%;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.item-title{
  text-align: left;
}
.item-value-nums{
  display: flex;
  justify-content: space-between;
  user-select: none;
}

button{
  width: 1em;
  height: 1em;
  padding: 0;
  line-height: 1em;
  box-sizing:content-box;
}
</style>
